<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"></script>
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 90vh;
            background-color: hsl(210, 60%, 15%);
        }

        #snowball {
            clip-path: circle(50%);
            width: 200px;
            height: 200px;
        }

        .snowflake-area {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.2) 80%);
        }

        .snowflake-area::before {
            content: "";
            filter: blur(1px);
            position: absolute;
            width: 50%;
            height: 30%;
            top: 2%;
            left: 25%;
            border-radius: 50%;
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
        }

        .snowflake-area::after {
            content: "";
            border-radius: 30%;
            width: 200px;
            height: 200px;
            position: absolute;
            z-index: -1;
            bottom: -100px;
            left: 0px;
            transform: perspective(150px) rotatex(80deg);
            filter: blur(20px);
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, hsla(210, 60%, 30%, 0.8) 25%, rgba(255, 255, 255, 0.8) 40%);
        }

        button {
            margin-top: 100px;
            background-color: hsla(210, 60%, 100%, 0);
            border: 1px solid hsla(210, 60%, 100%, 0.3);
            color: hsla(210, 60%, 100%, 0.5);
            padding: 8px16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;
            font-size: 0.6em;
            text-transform: uppercase;
            font-weight: bold;
            border-radius: 5px;
            transition: 1s;
        }

        button:hover {
            border: 1px solid hsla(210, 60%, 100%, 0.6);
            color: hsla(210, 60%, 100%, 0.8);
        }
    </style>
</head>

<body>
    <div class="snowflake-area">
        <canvas id="snowball" width="200" height="200"></canvas>
    </div>
    <button onclick="createSnowflakes()">点击试试</button>
    <script>
        const  spin = gsap.timeline({ 
            paused:  true 
        });    
        spin.from("#snowball", {       
            duration:  5,
                   rotate:  360,
                   transformOrigin:   "50%,50%",
                   ease:   "expo.out"    
        });

             
        const  canvas =  document.getElementById("snowball");     
        const  ctx = canvas.getContext("2d");    
        canvas.width =  200;    
        canvas.height =  200;     
        let  snowflakes = [];

             
        function  Snowflake(x, y, radius, speed, wind, alpha)  {       
            this.x = x;       
            this.y = y;       
            this.radius = radius;       
            this.speed = speed;       
            this.wind = wind;       
            this.update =   function ()  {         
                this.y +=  this.speed;         
                this.x +=  this.wind;         
                if  (this.y > canvas.height) {           
                    this.y =  0;           
                    this.x =  Math.random() * canvas.width;        
                }      
            };

                   
            this.draw =   function ()  {        
                ctx.beginPath();        
                ctx.arc(this.x,  this.y,  this.radius,  0,  Math.PI *  2);        
                ctx.fillStyle =  "white";        
                ctx.globalAlpha = alpha;        
                ctx.fill();      
            };    
        }

             
        function  createSnowflakes()  {      
            spin.restart();      
            snowflakes = [];       
            let  count =  Math.floor(Math.random() *  301) +  100;       
            for  (let  i =  0; i < count; i++) {         
                let  x =  Math.random() * canvas.width;         
                let  y =  Math.random() * canvas.height;         
                let  radius =  Math.random() *  3;         
                let  speed =  Math.random() *  0.1  +  1;         
                let  wind =  Math.random() *  2  -  1;         
                let  alpha =  Math.random() *  0.6  +  0.4;        
                snowflakes.push(new  Snowflake(x, y, radius, speed, wind, alpha));      
            }    
        }     
        function  animate()  {      
            ctx.clearRect(0,  0, canvas.width, canvas.height);      
            snowflakes.forEach((snowflake) =>  {        
                snowflake.update();        
                snowflake.draw();      
            });

                  
            requestAnimationFrame(animate);    
        }    
        createSnowflakes();    
        animate();
    </script>

</body>

</html>
